<!-- eslint-disable vue/multi-word-component-names -->
<template>
    <!-- 导航栏 -->
    <van-nav-bar :title="TypeName" left-text="返回" left-arrow fixed z-index="999" placeholder @click-left="back"
        @click-right="SearchShow = true">
        <template #right>
            <van-icon name="search" size="18" />
        </template>
    </van-nav-bar>

    <!-- 下拉菜单 -->
    <van-sticky :offset-top="46">
        <van-dropdown-menu>
            <van-dropdown-item v-model="FlagActive" :options="FlagList" @change="FlagToggle" />
            <van-dropdown-item v-model="TypeActive" :options="TypeList" @change="TypeToggle" />
            <van-dropdown-item v-model="SortActive" :options="SortList" @change="SortToggle" />
            <van-dropdown-item v-model="ByActive" :options="ByList" @change="ByToggle" />
        </van-dropdown-menu>
    </van-sticky>

    <!-- 搜索弹框 -->
    <van-popup v-model:show="SearchShow" position="top" clearable background="rgba(255, 255, 255, 0.5)">
        <van-search v-model="keywords" placeholder="请输入关键词" @search="search" />
    </van-popup>

    <!-- 下拉刷新 -->
    <van-pull-refresh v-model="refreshing" @refresh="refresh">
        <!-- 加载列表 -->
        <van-list v-model:loading="loading" :finished="finished" :offset="10" :immediate-check="false"
            finished-text="没有更多了" @load="load">
            <ul class="proul" v-if="list">
                <li v-for="(item, key) in list" :key="key">
                    <router-link :to="{ path: '/product/info', query: { pid: item.id } }">
                        <van-image width="100%" :height="176" fit="cover" :src="item.thumbs_text" />
                    </router-link>
                    <router-link :to="{ path: '/product/info', query: { pid: item.id } }">
                        <p class="tit">{{ item.name }}</p>
                    </router-link>
                    <div class="price">
                        <p>￥{{ item.price }} / {{ item.unit_text }}<span>￥8999</span></p>
                    </div>
                </li>
            </ul>
        </van-list>
    </van-pull-refresh>

    <!-- 返回顶部 -->
    <van-back-top />
</template>

<script setup>
import { reactive, getCurrentInstance, ref, onBeforeMount } from 'vue';

const { proxy } = getCurrentInstance()

// 返回上一页
const back = () => proxy.$router.go(-1)

// 筛选
let FlagActive = ref('0')   // 标识 1-新品  2-热销  3-推荐
let TypeActive = ref('0')
let SortActive = ref('createtime')  // 排序 上架时间  价格  库存
let ByActive = ref('desc')  // desc 降序    asc 升序
let SearchShow = ref(false)     // 搜索框显示状态   false  关闭  true  打开
let keywords = ref('')      // 关键词
let TypeName = ref('')      // 标题栏上面的分类名称

// 下拉刷新
let list = ref([])      // 数据列表
let page = ref(1)       // 分页
let loading = ref(false)    // 加载状态
let finished = ref(false)    // 是否无更多数据
let refreshing = ref(false)    // 刷新状态

let FlagList = [
    { text: '全部商品', value: '0' },
    { text: '新品', value: '1' },
    { text: '热销', value: '2' },
    { text: '推荐', value: '3' },
]

let TypeList = reactive([
    { text: '全部分类', value: '0' },
])

let SortList = [
    { text: '上架时间', value: 'createtime' },
    { text: '价格', value: 'price' },
    { text: '库存', value: 'stock' },
]

let ByList = [
    { text: '降序', value: 'desc' },
    { text: '升序', value: 'asc' },
]

// 属性切换
const FlagToggle = async (value) => {
    refreshing.value = true
    FlagActive.value = value
    refresh()
}

// 分类切换
const TypeToggle = async (value) => {
    refreshing.value = true
    TypeActive.value = value
    refresh()
}

// 排序切换
const SortToggle = async (value) => {
    refreshing.value = true
    SortActive.value = value
    refresh()
}


// 升降序切换
const ByToggle = async (value) => {
    refreshing.value = true
    ByActive.value = value
    refresh()
}

// 搜索事件
const search = async () => {
    // 隐藏弹出层
    SearchShow.value = false
    refreshing.value = true

    // 触发刷新效果
    refresh()
}

// 生命周期
onBeforeMount(async () => {
    type()
    load()
})

// “全部分类” 列表
const type = async () => {
    var result = await proxy.$POST({
        url: '/product/type'
    })

    if (result.code == 0) {
        proxy.$fail(result.msg)
        return false
    }

    result.data.map(item => {
        TypeList.push({
            text: item.name,
            value: item.id
        })
    })
}

// 下拉刷新
const refresh = async () => {
    // 定时器
    setTimeout(() => {
        // 清空查询参数
        page.value = 1
        list.value = []
        loading.value = true
        finished.value = false

        load()
    }, 1000)
}

// 加载数据方法
const load = async () => {
    // 判断是否为加载状态
    if (refreshing.value) {
        refreshing.value = false
    }

    // 组装数据
    var params = {
        typeid: TypeActive.value,
        flag: FlagActive.value,
        sort: SortActive.value,
        by: ByActive.value,
        keywords: keywords.value,
        page: page.value
    }

    // 发生请求
    var result = await proxy.$POST({
        url: '/product/index',
        params
    })

    // 请求发送完毕后，加载状态也就完毕了
    loading.value = false

    // 如果没有更多数据了，就说明已经加载到底了...
    if (result.code == 0) {
        finished.value = true
        return false
    }

    TypeName.value = result.data.TypeName

    list.value = list.value.concat(result.data.list)
    page.value++
}
</script>